<template>
	<view class="container">
		<button open-type="contact" class="contact-btn"><van-icon name="service" size="40" /></button>
		<view class="tab-box">
			<van-tabs :active="activeNav" line-width="20" line-height="1" title-active-color="#07C160" color="#07C160"
				@change="onTabChange">
				<van-tab v-for="(item, index) in tabBars" :key="index" :title="item.name"></van-tab>
			</van-tabs>
		</view>
		<swiper :current="activeNav" class="swiper-box" :duration="300" @change="onSwiperChange" v-if="token">
			<swiper-item v-for="(tab, index1) in interviewList" :key="index1">
				<scroll-view class="scroll-v" enableBackToTop="true" scroll-y @scrolltolower="loadMore(index1)">
					<view class="list" v-if="tab.data.length">
						<view class="list-item" v-for="(list_item, list_index) in tab.data" :key="list_index"
							@click="goto(list_item)">
							<view class="statu">{{ list_item.signtype | getSignTypeName }}</view>
							<view class="top">{{ list_item.signTime }} </view>
							<view class="middle">
								<view class="title van-ellipsis">{{ list_item.name }}</view>
								<view class="price-wrap">
									<text class="price">{{ list_item.salary }}</text>
									<view class="tag" v-if="list_item.taglist.length">
										<text class="tag-item" v-for="(tag_item, tag_index) in list_item.taglist"
											:key="tag_index">{{ tag_item }}</text>
									</view>
								</view>
							</view>
							<view class="bottom" @click.stop.prevent>
								<view class="phone-cmp" @click="callCmp(list_item)">
									<van-icon name="phone" size="40rpx" />
									<text style="margin-left: 10rpx;">联系企业</text>
								</view>
								<view class="mess-cmp" @click="goChat(list_item)">
									<van-icon name="comment" size="40rpx" />
									<text style="margin-left: 10rpx;">留言</text>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="empty-data">
						<text>暂无相关工作哦~</text>
						<van-button type="danger" @click="goJob">去找工作</van-button>
					</view>
					<uni-load-more :status="tab.loadStatus" v-if="tab.data.length" />
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="no-login" v-else>
			<view>你还未登录~赶紧登录查看工作吧</view>
			<view><van-button type="danger" @click="goLogin">登录 / 注册</van-button></view>
		</view>
	</view>
</template>

<script>
	import {
		getInterviewList
	} from '@/api/user'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	// 缓存每页最多
	const MAX_CACHE_DATA = 100
	// 缓存页签数量
	const MAX_CACHE_PAGE = 4
	export default {
		data() {
			return {
				activeNav: 0,
				tabBars: [{
						id: 0,
						name: '全部'
					},
					{
						id: 2,
						name: '面试'
					},
					{
						id: 3,
						name: '已录用'
					},
					{
						id: 4,
						name: '不合适'
					}
				],
				interviewList: [],
				cacheTab: []
			}
		},
		computed: {
			...mapState(['token'])
		},
		filters: {
			getSignTypeName(type) {
				let name = ''
				switch (type) {
					case 1:
						name = '已报名'
						break
					case 2:
						name = '已面试'
						break
					case 3:
						name = '已录用'
						break
					case 4:
						name = '不合适'
						break
					default:
						break
				}

				return name
			}
		},
		onShow() {},
		onLoad() {
			this.init()
		},
		onPullDownRefresh() {
			setTimeout(async () => {
				this.interviewList.splice(this.activeNav, 1, {
					data: [],
					page: 1,
					pageSize: 10,
					refreshText: '',
					loadingText: '加载更多...',
					loadStatus: 'more'
				})
				await this.loadList(this.activeNav)
				uni.stopPullDownRefresh()
			}, 500)
		},
		methods: {
			init() {
				this.tabBars.forEach(tabBar => {
					this.interviewList.push({
						data: [],
						page: 1,
						pageSize: 10,
						refreshText: '',
						loadingText: '加载更多...',
						loadStatus: 'more'
					})
				})
				this.loadList(0)
			},
			onTabChange(e) {
				this.activeNav = e.target.index || e.detail.index
			},
			onSwiperChange(e) {
				let index = e.target.current || e.detail.current
				this.switchTab(index)
			},
			switchTab(index) {
				if (this.interviewList[index].data.length === 0) {
					this.loadList(index)
				}

				if (this.activeNav === index) {
					return
				}

				// 缓存 tabId
				if (this.interviewList[this.activeNav].data.length > MAX_CACHE_DATA) {
					let isExist = this.cacheTab.indexOf(this.activeNav)
					if (isExist < 0) {
						this.cacheTab.push(this.activeNav)
					}
				}

				this.activeNav = index
				// this.$refs.nav.calculator(index) //改变导航栏位置

				// 释放 tabId
				if (this.cacheTab.length > MAX_CACHE_PAGE) {
					let cacheIndex = this.cacheTab[0]
					this.clearTabData(cacheIndex)
					this.cacheTab.splice(0, 1)
				}
			},
			async loadList(index) {
				let activeTab = this.interviewList[index]
				activeTab.loadStatus = 'loading'

				const res = await getInterviewList({
					typeid: this.tabBars[index].id,
					page: activeTab.page,
					pagesize: activeTab.pageSize
				})
				if (res.length === 0) {
					activeTab.loadStatus = 'noMore'
					return
				}

				if (res.length) {
					activeTab.data = activeTab.data.concat(res)
				} else {
					activeTab.data = []
				}

				if (res.length < activeTab.pageSize) {
					activeTab.loadStatus = 'noMore'
				} else {
					activeTab.loadStatus = 'more'
				}
				activeTab.page++
			},
			clearTabData(e) {
				this.interviewList[e].data.length = 0
				this.interviewList[e].loadingText = '加载更多...'
			},
			loadMore(e) {
				setTimeout(() => {
					this.loadList(this.activeNav)
				}, 500)
			},
			goto(item) {
				uni.navigateTo({
					url: `/pages/index/job/detail?id=${item.id}`
				})
			},
			goLogin() {
				uni.navigateTo({
					url: '../my/login/login'
				})
			},
			goJob() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			callCmp(item) {
				uni.makePhoneCall({
					phoneNumber: item.phoneNumber
				})
			},
			goChat(item) {
				this.$Router.push({
					path: '/pages/interview/subPages/chat',
					query: {
						id: item.id,
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .van-button--danger {
		background-color: #07C160;
		border-color: #07C160;
	}
</style>
<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100%;

		.contact-btn {
			position: fixed;
			z-index: 2;
			background-color: #07C160;
			right: 40rpx;
			bottom: 160rpx;
			height: 100rpx;
			width: 100rpx;
			overflow: hidden;
			border-radius: 50%;
			line-height: 1;
			color: #fff;
			cursor: pointer;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 30rpx;
			justify-content: center;
			margin: 0;
			padding: 0;
			box-shadow: none;

			&::after {
				border: 0;
			}
		}

		.tab-box {
			margin-bottom: 20rpx;
		}

		.swiper-box {
			flex: 1;

			.scroll-v {
				overflow-y: scroll;
				height: 100%;
			}

			.list {
				.list-item {
					position: relative;
					padding: 0 20rpx;
					background-color: #fff;
					margin-bottom: 20rpx;

					.statu {
						position: absolute;
						top: 10rpx;
						left: 0;
						background-color: #07C160;
						color: #fff;
						font-size: 30rpx;
						padding: 10rpx 20rpx;
						border-top-right-radius: 30rpx;
						border-bottom-right-radius: 30rpx;
					}

					.top {
						text-align: right;
						height: 80rpx;
						line-height: 80rpx;
					}

					.middle {
						font-size: 30rpx;
						border-bottom: 1px solid #e5e5e5;
						padding: 20rpx 0;

						.title {
							margin-bottom: 20rpx;
						}

						.price-wrap {
							display: flex;
							align-items: center;

							.price {
								color: #07C160;
							}

							.tag {
								flex: 1;
								margin-left: 20rpx;

								.tag-item {
									color: #6490eb;
									padding: 5rpx 10rpx;
									background-color: #edeffc;
									margin-left: 5rpx;

									&:first-of-type {
										margin-left: 0;
									}
								}
							}
						}
					}

					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 80rpx;
						color: #07C160;

						.phone-cmp,
						.mess-cmp {
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}

		.no-login {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			view {
				&:nth-of-type(1) {
					color: #999999;
					margin-bottom: 30rpx;
				}
			}
		}

		.empty-data {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			text {
				color: #999999;
				margin-bottom: 30rpx;
			}
		}
	}
</style>